import Manage from "./manage.js";

let {form,$,layer} = layui;
export default class Login{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <style>
                    body{
                        background-color: #ccc;
                    }
                    .card{
                        width: 500px;
                        height:300px;
                        margin:auto;
                    }
                </style>
            </head>
            <body>
                <div class="layui-card card">
                    <div class="layui-card-header">登录</div>
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="loginForm" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="username"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入用户名"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码框</label>
                                <div class="layui-input-block">
                                    <input
                                        type="password"
                                        name="pwd"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入密码"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                         
        
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button
                                        class="layui-btn"
                                        lay-submit
                                        lay-filter="loginSubmit"
                                    >
                                        立即提交
                                    </button>
                                    <button
                                        type="reset"
                                        class="layui-btn layui-btn-primary"
                                    >
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </body>
        </html>
        `;
        $("#root").html(template);
    }
    handle(){
        form.on("submit(loginSubmit)",function(data){
            $.ajax({
                type:"post",
                url:"/users/login",
                data:data.field,
                success(res){
                    if(res.status == 1){
                        layer.alert("登录成功",function(){
                            // location.href = "manage.html";
                            // new Manage();
                            localStorage.token = res.token;
                            location.href = "#manage";
                        });
                    }else{
                        layer.alert("登录失败");
                    }
                   
                }
            });
            return false;
        });
       
    }
}